<template>
  <div class="back">
    <div class="top">
        <div class="left">
            <div class="list">
                <div class="listcontext">

 
                        <router-link tag="div"  v-for="a in routerlist" :key="a.index" :to="a.routerto">  
                             <tag :title="a.title"/>
                        </router-link>
               
                    
                    <pingfen/>
                </div>
            </div>
            <!-- <div style="position:relative; width: 100%;height: 100%; " >
            <img src="../assets/主板.jpeg" alt="">
            <img @click="selectneicun" src="../assets/内存遮罩.png" alt="" v-show="neicun">
            <img @click="selectxianka" src="../assets/显卡遮罩.png" alt="" v-show="xianka">
            <img @click="selectcpu" src="../assets/cpu遮罩.png" alt="" v-show="cpu">
        </div> -->
        </div>
        <div class="right">
            <router-view></router-view>
            <!-- <paihang/> -->
        </div>
    </div>
    <div class="bottom">
        <div class="paihang">111</div>
        <div class="zhuangji">222</div>
        <div class="duibi">333</div>
        <div class="geren"></div>
    </div>
  </div>
</template>

<script>
    // import
    // import axios from "axios"
    import API from '../API/list.js'
import paihang from './paihang.vue'
import tag from './tag.vue'
import pingfen from './pingfen.vue'
export default {
    name:"simulation",
    components:{
    paihang,
    tag,
    pingfen
    },
    data(){
        return{
            test:"11",
            neicun:true,
            xianka:true,
            cpu:true,
            open:"",
            routerlist:[{
                title:"GPU",
                routerto:"/paihang"
            },
            {
                title:"CPU",
                routerto:"/danhepaihang"
            },
            {
                title:"内存",
                routerto:"/memorypaihang"
            }
            ,
            {
                title:"电源",
                routerto:"/atxpaihang"
            }
            
        ]
        }
    },
    
    methods:{
        selectneicun(){
            this.neicun=!this.neicun
        },
        selectxianka(){
            this.xianka=!this.xianka
        },
        selectcpu(){
            this.cpu=!this.cpu
        },
        // getDatas(){
        //    API.getData()
        // }
    //     get(){    //查询操作
    //   axios.get('http://192.168.31.226:8081/sys/gpu/listByIndex',{
      
    //     // params: {
          
    //     //   acc: this.$data.acc,
        
    //     // }
    //   }).then(res=>{
    //        console.log(res.data);   
        
    //   }).catch(err=>{
    //       alert("用户名或密码错误！" + err);
    //   })
    // },
    },

}
</script>

<style scoped>
.bottom{
width: 100%;
height: 10vh;
background-color: aquamarine;
justify-content: space-between;
flex-direction: row;
display: flex;
}
.top
{
    display: flex;
}
.back{
    width: 1920rpx;
   height:1080rpx;
    display: flex;
    flex-direction: column;
}
.left{
width: 70vw;
display: flex;

}
.right{
    flex:1;

}
img{
    position: absolute;
    width: 100%;
      object-fit: contain;

}
.list{
    width: 400px;
    height: 90vh;
    position: absolute;
    z-index: 99;
}
.paihang{
background-color: rgb(23, 190, 23);
width: 25%;
    height: 100%;
}
.zhuangji{
    background-color: blanchedalmond;
    width: 25%;
    height: 100%;
}
.duibi{
    background-color: rgb(75, 190, 231);
    width: 25%;
    height: 100%;
}
.geren{
    background-color: rgb(231, 202, 75);
    width: 25%;
    height: 100%;
}

</style>